<script setup lang="ts">
import {reactive, ref} from "vue";
import {useRouter} from 'vue-router'
import useStore from "@/store/index";
import {loginApi} from "@/api/userApi";
import {ElMessage} from "element-plus";

const router = useRouter()
const store = useStore()
const loginFormV = ref()
const loading = ref(false)
const loginImage = new URL('@/assets/loginPicture.png', import.meta.url).href
const loginForm = reactive({
  code: 'admin', password: '123456'
})
const loginRules = {code: [
    {required: true, message: '用户名不能为空！', trigger: 'blur'},
    {min: 2, max: 20, message: '用户名长度需大于2', trigger: 'blur'}
  ],
  password: [
    {required: true, message: '密码不能为空！', trigger: 'blur'},
    {min: 6, max: 20, message: '密码长度需大于6', trigger: 'blur'}]
}

const loginByPassword = ()=>{
  loading.value = true
  loginFormV.value.validate(async (valid: any)=>{
    if (valid){
      //登录逻辑
      let res = await loginApi(loginForm).catch((err)=>{
        ElMessage.error(err)
      })
      if (res?.data.code == 200){
        store.account = loginForm.code
        ElMessage.success('登录成功')
        await router.replace('/home')
      }else {
        ElMessage.error(res?.data.msg)
      }

    }
    loading.value = false
  })


}
</script>

<template>
  <div id="container">
    <div id="background"></div>
    <div id="login-box">
      <el-image :src="loginImage" fit="cover"></el-image>
      <div id="login-form">
        <el-image style="width: 50px" src="/env.svg"></el-image>
        <h3>欢迎登录NEPM系统管理员端！</h3>
        <el-form style="width:60%; margin-top: 2rem" status-icon="status-icon" ref="loginFormV" :model="loginForm" :rules="loginRules">
          <el-form-item prop="code">
            <el-input v-model="loginForm.code" type="text" auto-complete="off" placeholder="请输入账号" maxlength="20"
                      prefix-icon="user"/>
          </el-form-item>
          <el-form-item style="width:100%" prop="password">
            <el-input v-model="loginForm.password" type="password" placeholder="请输入密码" maxlength="20"
                      prefix-icon="lock" show-password="show-password">
            </el-input>

          </el-form-item>
          <el-form-item style="width:100%; ">
            <el-button ref="loginButton" :loading="loading" class="login-btn" size="default" type="primary"
                       style="width:100%; margin-top: 1rem"
                       @click.native.prevent="loginByPassword">
              <span v-if="!loading">登录</span>
              <span v-else>登录中...</span>
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<style scoped>
#container{
  display: flex;
  position: absolute;
  margin: 0;
  padding: 0;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  justify-content: center;
  align-items: center;
  overflow-x: hidden;
}

#background{
  z-index: -1;
  position: fixed;
  background-size: 200% 200%;
  /*background: linear-gradient(45deg, #ACBFEA, #C8D5F6, #FED7DD, #FFACBB) no-repeat;*/
  background-image: linear-gradient(120deg, #89f7fe 0%, #66a6ff 100%);
  margin: 0;
  padding: 0;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.6;
  animation: bgAnimation 15s infinite;
}
@keyframes bgAnimation {
  0% {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}


#login-box{
  position: absolute;
  top: 10%;
  left: 15%;
  width: 70%;
  height: 80%;
  border-radius: 10rem;
  display: flex;
}
#login-form{
  background: #ffffff;
  width: 40%;
  height: 100%;
  border-radius: 0px 20px 20px 0px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>
